<template>
	<!-- ok -->
	<view class="wanlpage-advert-banner" :style="[pageData.style]">
		<swiper class="screen-swiper square-dot" :style="{height: pageData.params.height}" :indicator-dots="true"
			:circular="true" :autoplay="true" :interval="pageData.params.interval" duration="500">
			<swiper-item v-for="(item, index) in advertData" :key="item.id" @tap="onAdvert(item)">
				<image :style="{borderRadius: radius}" :src="$wanlshop.oss(item.pic, 414, 0, 1, 'transparent', 'png')"
					mode="aspectFill"></image>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		name: "WanlPageAdvertBanner",
		props: {
			pageData: {
				type: Object,
				default: function() {
					return {
						"name": "轮播组件",
						"type": "advertBanner",
						"style": {
							"color": "#000000",
							"margin": "16rpx 12.5px 0 12.5px",
							"border-radius": "20rpx",
							"overflow": "hidden"
						},
						"params": {
							"interval": "2800",
							"height": "230rpx",
							"banstyle": "1"
						}
					}
				}
			},
			advertData: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				radius: '0rpx'
			}
		},
		mounted() {
			if (this.pageData.style['border-radius']) {
				this.radius = this.pageData.style['border-radius']
			}
		}
	}
</script>
<style lang="scss">
	.screen-swiper {
		min-height: 100rpx !important;

		image {
			overflow: hidden;
		}
	}
</style>